<template>
  <div>
    <el-dialog
      :title="titleInfo"
      v-model="dialogTableVisible"
      :close-on-click-modal="false"
      @close="closeDialogFormVisible"
    >
      <div class="content-info">
        <el-form
          ref="queryInfoRef"
          :rules="listQueryRules"
          :model="queryInfo"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="头像" prop="imageUrl">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :limit="1"
              :action="actionUrl"
              accept=".png,.jpe,.jpeg"
              :data="additionalData"
              :before-upload="handleBeforeUpload"
            >
              <img
                v-if="imageUrl"
                :src="imageUrl"
                class="avatar"
                prop="imageUrl"
              />
            </el-upload>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              type="text"
              v-model="queryInfo.name"
              auto-complete="off"
              class="!w-[300px]"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="queryInfo.phone"
              placeholder="请输入手机号"
              clearable
              @input="queryInfo.phone = queryInfo.phone.replace(/\D/g, '')"
              auto-complete="off"
              maxlength="11"
              class="!w-[300px]"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="queryInfo.status"
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
          <el-form-item label="备注" prop="notes">
            <el-input
              placeholder="请输入备注"
              clearable
              v-model="queryInfo.notes"
              auto-complete="off"
              class="!w-[300px]"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="closeDialogFormVisible" type="danger"
              >取消</el-button
            >
            <el-button type="primary" :loading="loading" @click="handleSubmit">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { getuFile } from "@/api/user";
import {
  reactive,
  ref,
  inject,
  onMounted,
  defineProps,
  defineEmits,
  nextTick,
  defineExpose,
  watch
} from "vue";
const chekcPhone = (rule, value, callback) => {
  const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
  if (!value) {
    return callback(new Error("手机号码不能为空"));
  } else if (!reg.test(value)) {
    return callback(new Error("手机号格式不正确"));
  } else {
    callback();
  }
};
const listQueryRules = {
  name: [{ required: true, message: "请输入名字", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { validator: chekcPhone, trigger: "change" }
  ],
  status: [{ required: true, message: "请选择状态", trigger: "blur" }]
};
const imageUrl = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);
const queryInfoRef = ref("");
const additionalData = reactive({
  // 这里添加你需要传递的额外参数
  type: "admin",
  action: "loan"
});
const props = defineProps({
  titleInfo: {
    type: String,
    default: ""
  },
  isEdit: {
    type: String,
    default: ""
  }
});
const dialogTableVisible = ref(false);
const queryInfo = ref({
  status: 1,
  phone: "",
  name: "",
  notes: "",
  image: ""
});
const opneDialogVisible = rowData => {
  if (props.isEdit == 1) {
    queryInfo.value = { ...rowData };
  }
  dialogTableVisible.value = true;
};
// 取消
const closeDialogFormVisible = () => {
  dialogTableVisible.value = false;
  imageUrl.value = `https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png`;
  queryInfo.value = {
    status: 1
  };
};
const emit = defineEmits(["handleSubmit"]);
// 提交
const handleSubmit = () => {
  queryInfoRef.value.validate(valid => {
    if (valid) {
      // 添加
      const parmas = { ...queryInfo.value };
      emit("handleSubmit", parmas);
    }
  });
};
// 上传图片
const handleBeforeUpload = file => {
  const filesInfo = file.size / 1024 / 1024 < 2;
  if (!filesInfo) {
    ElMessageBox.alert("上传头像图片大小不能超过 2MB!");
  }
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      // 转换成功，得到Base64字符串
      const base64 = e.target.result;
      // 处理Base64字符串，例如可以在这里发起接口请求
      const params = {
        ...additionalData,
        file: base64
      };
      getuFile(params).then(res => {
        if (res.code == 200) {
          imageUrl.value = base64;
          queryInfo.value.image = res.data;
        }
      });
    };
    reader.onerror = reject;
    reader.readAsDataURL(file); // 转换文件为Base64
  });
};
defineExpose({ opneDialogVisible, closeDialogFormVisible }); //子组件需要把数据导出去
</script>

<style lang="scss" scoped>
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
